<template>
  <div class="top">
    <!-- <Menu></Menu> -->
  <div class="loginenter">
     <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        >
        <h2>登录</h2>
        <el-input placeholder="输入邮箱" v-model="ruleForm.name" clearable></el-input>
        <el-input placeholder="输入密码" v-model="ruleForm.password" clearable></el-input>
        <div class="btn"><el-button>登录</el-button></div>
        <p @click="goToRegister">没有账号,去注册></p>
        <p @click="forgetPassword">忘记密码?</p>
      </el-form>
  </div>
  <!-- <Footer></Footer> -->
  </div>
</template>

<script>
// import Menu from './Menu'
import Footer from './Footer'
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        password: '',
      },
      rules: {
        name: [
          { required: true, message: "请输入账户", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
   components: {Footer},
  methods: {
    goToRegister () {
      this.$router.push('/login/register')
    },
    forgetPassword () {
      this.$router.push('/login/forgetpassword')
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and (max-width: 1024px) {
  @import url(../assets/css/mobile_loginenter.less);
}
@media screen and (min-width: 1024px) {
  @import url(../assets/css/pc_loginenter.less);
}

</style>

